<template>
    <div class="common-layout">
        <el-container>
            <el-header style="--el-header-padding: 0 0px;--el-header-height: 4rem;">
                <Header></Header>
            </el-header>
            <el-container class="inner_container">
                <el-aside>
                    <SideMain />
                </el-aside>
                <el-main>
                    <transition name="fade" enter-active-class="animated fadeIn">
                        <router-view></router-view>
                    </transition>
                </el-main>
            </el-container>
        </el-container>
    </div>
    <!-- <Home /> -->
    <!-- <Login /> -->
</template>
  
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import Header from '../components/Header.vue'
import SideMain from '../components/SideMain.vue';
import 'animate.css';

</script>
  
<style scoped>
body {
    margin: 0;
    padding: 0;
}

.common-layout {
    width: 100vw;
    height: 100vh;
}

.el-container {
    width: 100vw;
    height: 100vh;
    min-height: 777px;
    overflow: hidden;
}

.inner_container {
    min-width: 1024px;
}

.el-header,
.el-aside {
    margin: 0 !important;
    padding: 0;
}

.el-header {
    /* background: linear-gradient(45deg, hsl(198, 92%, 59%), #5bc9f8, #80d4f9, hsl(200, 89%, 82%), #a6defa, #c7e9fb, #80d4f9); */
    /* box-shadow: 0 2px 3px 2px rgba(0, 0, 0, .22), 0 0 5px 2px rgba(0, 0, 0, .24); */
    /* box-shadow: -7px 3px 10px 0 rgba(0,0,0,.06); */
    z-index: 1;
    /* border-radius: 0 0 20px 20px; */
}

.el-aside {
    /* box-shadow: 0px 0 5px 2px #ccc; */
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .16);
    z-index: 0;
    display: flex;
    width: auto;
    height: 100%;
    min-width: 130px;
    min-height: 777px;
    background-color: #e9e9e9;
}

.el-main {
    overflow: auto !important;
    padding: 10px;
    padding-top: 0;
    z-index: 0;
    /* background-color: aliceblue; */
}

/* .logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
} */
.el-menu-item * {
    vertical-align: center !important;
}
</style>